<template>
  <div class="admin-jobs">
    <div class="page-header">
      <h1 class="page-title">职位管理</h1>
    </div>

    <!-- 搜索和筛选区 -->
    <el-card class="search-card">
      <div class="search-form">
        <el-form :model="searchForm" label-width="80px" inline>
          <el-form-item label="关键词">
            <el-input 
              v-model="searchForm.keyword" 
              placeholder="职位名称" 
              clearable 
              @keyup.enter="handleSearch"
            />
          </el-form-item>
          <el-form-item label="职位类型">
            <el-select v-model="searchForm.jobType" placeholder="全部类型" clearable>
              <el-option label="全职" value="1" />
              <el-option label="兼职" value="2" />
              <el-option label="实习" value="3" />
              <el-option label="校招" value="4" />
            </el-select>
          </el-form-item>
          <el-form-item label="工作城市">
            <el-select v-model="searchForm.city" placeholder="全部城市" clearable>
              <el-option label="北京" value="北京" />
              <el-option label="上海" value="上海" />
              <el-option label="广州" value="广州" />
              <el-option label="深圳" value="深圳" />
              <el-option label="杭州" value="杭州" />
            </el-select>
          </el-form-item>
          <el-form-item label="审核状态">
            <el-select v-model="searchForm.status" placeholder="全部状态" clearable>
              <el-option label="待审核" value="pending" />
              <el-option label="已通过" value="approved" />
              <el-option label="已拒绝" value="rejected" />
              <el-option label="已下线" value="offline" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- 职位列表 -->
    <el-card class="table-card">
      <template #header>
        <div class="card-header">
          <span>职位列表</span>
          <div class="header-right">
            <el-button size="small" @click="refreshJobList">
              <el-icon><refresh /></el-icon>刷新
            </el-button>
          </div>
        </div>
      </template>
      
      <div class="table-view">
        <el-table 
          :data="jobList" 
          style="width: 100%" 
          v-loading="loading"
          stripe
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="ID" prop="id" width="80" />
          <el-table-column label="职位信息" min-width="250">
            <template #default="scope">
              <div class="job-cell">
                <div class="job-name">{{ scope.row.title }}</div>
                <div class="job-company">{{ scope.row.company || scope.row.companyName }}</div>
                <div class="job-tags">
                  <el-tag size="small" effect="plain">{{ getJobTypeName(scope.row.categoryId) }}</el-tag>
                  <el-tag size="small" effect="plain" type="success">{{ scope.row.city }}</el-tag>
                  <el-tag size="small" effect="plain" type="warning" v-if="scope.row.isUrgent">急聘</el-tag>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="薪资" prop="salary" width="120" />
          <el-table-column label="发布时间" prop="publishTime" width="180" />
          <el-table-column label="状态" width="100">
            <template #default="scope">
              <el-tag :type="getStatusTag(scope.row.status)">
                {{ getStatusName(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220" fixed="right">
            <template #default="scope">
              <el-button size="small" @click="viewJobDetails(scope.row)">查看</el-button>
              <el-button 
                size="small" 
                type="success" 
                v-if="scope.row.status === 0"
                @click="approveJob(scope.row)"
              >通过</el-button>
              <el-button 
                size="small" 
                type="danger" 
                v-if="scope.row.status === 0"
                @click="rejectJob(scope.row)"
              >拒绝</el-button>
              <el-button 
                size="small" 
                type="warning" 
                v-if="scope.row.status === 1"
                @click="offlineJob(scope.row)"
              >下线</el-button>
              <el-button 
                size="small" 
                type="info" 
                v-if="scope.row.status === 3 || scope.row.status === 2"
                @click="restoreJob(scope.row)"
              >恢复</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 批量操作 -->
        <div class="batch-actions" v-if="selectedJobs.length > 0">
          <span>已选择 {{ selectedJobs.length }} 项</span>
          <el-button-group>
            <el-button size="small" type="success" @click="batchApprove" v-if="hasPendingJobs">批量通过</el-button>
            <el-button size="small" type="danger" @click="batchReject" v-if="hasPendingJobs">批量拒绝</el-button>
            <el-button size="small" type="warning" @click="batchOffline" v-if="hasApprovedJobs">批量下线</el-button>
          </el-button-group>
        </div>
        
        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalJobs"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>
    
    <!-- 职位详情对话框 -->
    <el-dialog
      v-model="jobDetailVisible"
      title="职位详情"
      width="800px"
      destroy-on-close
    >
      <div v-if="currentJob" class="job-detail">
        <div class="job-header">
          <h2 class="job-title">{{ currentJob.title }}</h2>
          <el-tag :type="getStatusTag(currentJob.status)">
            {{ getStatusName(currentJob.status) }}
          </el-tag>
        </div>
        
        <div class="job-info">
          <div class="info-item">
            <span class="label">公司：</span>
            <span class="value">{{ currentJob.company || currentJob.companyName }}</span>
          </div>
          <div class="info-item">
            <span class="label">薪资：</span>
            <span class="value highlight">{{ currentJob.salary }}</span>
          </div>
          <div class="info-item">
            <span class="label">地点：</span>
            <span class="value">{{ currentJob.city }}</span>
          </div>
          <div class="info-item">
            <span class="label">职位类型：</span>
            <span class="value">{{ getJobTypeName(currentJob.categoryId) }}</span>
          </div>
          <div class="info-item">
            <span class="label">学历要求：</span>
            <span class="value">{{ currentJob.education }}</span>
          </div>
          <div class="info-item">
            <span class="label">经验要求：</span>
            <span class="value">{{ currentJob.experience }}</span>
          </div>
          <div class="info-item">
            <span class="label">发布时间：</span>
            <span class="value">{{ currentJob.publishTime }}</span>
          </div>
        </div>
        
        <div class="detail-section">
          <div class="section-title">职位描述</div>
          <div class="section-content" v-html="currentJob.description || '暂无职位描述'"></div>
        </div>
        
        <div class="detail-section">
          <div class="section-title">任职要求</div>
          <div class="section-content" v-html="currentJob.requirement || currentJob.requirements || '暂无任职要求'"></div>
        </div>
        
        <div v-if="currentJob.status === 2" class="detail-section">
          <div class="section-title">拒绝原因</div>
          <div class="section-content">{{ currentJob.rejectReason || '未提供拒绝原因' }}</div>
        </div>
        
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="jobDetailVisible = false">关闭</el-button>
          <el-button 
            type="success" 
            v-if="currentJob && currentJob.status === 0"
            @click="approveJob(currentJob)"
          >通过</el-button>
          <el-button 
            type="danger" 
            v-if="currentJob && currentJob.status === 0"
            @click="rejectJob(currentJob)"
          >拒绝</el-button>
          <el-button 
            type="warning" 
            v-if="currentJob && currentJob.status === 1"
            @click="offlineJob(currentJob)"
          >下线</el-button>
          <el-button 
            type="info" 
            v-if="currentJob && (currentJob.status === 3 || currentJob.status === 2)"
            @click="restoreJob(currentJob)"
          >恢复</el-button>
        </div>
      </template>
    </el-dialog>
    
    <!-- 拒绝原因对话框 -->
    <el-dialog
      v-model="rejectDialogVisible"
      title="拒绝原因"
      width="500px"
      append-to-body
    >
      <el-form :model="rejectForm" label-width="80px">
        <el-form-item label="拒绝原因" prop="reason">
          <el-select v-model="rejectForm.reason" placeholder="请选择拒绝原因" style="width: 100%">
            <el-option label="信息不完整" value="信息不完整" />
            <el-option label="职位描述不清晰" value="职位描述不清晰" />
            <el-option label="薪资不合理" value="薪资不合理" />
            <el-option label="涉嫌虚假信息" value="涉嫌虚假信息" />
            <el-option label="其他原因" value="其他原因" />
          </el-select>
        </el-form-item>
        <el-form-item label="补充说明" prop="comment">
          <el-input 
            v-model="rejectForm.comment" 
            type="textarea" 
            rows="4" 
            placeholder="请输入详细说明（选填）"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="rejectDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmReject" :loading="submitLoading">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { 
  Download,
  Refresh
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request'
import { updateJobStatus } from '@/api/job'

// 加载状态
const loading = ref(false)

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const totalJobs = ref(0)

// 搜索表单
const searchForm = reactive({
  keyword: '',
  jobType: '',
  city: '',
  status: '',
  dateRange: []
})

// 选中的职位
const selectedJobs = ref([])

// 职位列表数据
const jobList = ref([])

// 计算属性：是否有待审核的职位
const hasPendingJobs = computed(() => {
  return selectedJobs.value.some(job => job.status === 0)
})

// 计算属性：是否有已通过的职位
const hasApprovedJobs = computed(() => {
  return selectedJobs.value.some(job => job.status === 1)
})

// 获取职位列表
const fetchJobList = async () => {
  loading.value = true
  
  try {
    // 构建查询参数
    const params = {
      page: currentPage.value,
      size: pageSize.value,
      keyword: searchForm.keyword,
      categoryId: searchForm.jobType ? parseInt(searchForm.jobType) : undefined,
      city: searchForm.city
    }
    
    // 添加状态过滤条件
    if (searchForm.status) {
      params.status = searchForm.status === 'pending' ? 0 :
                      searchForm.status === 'approved' ? 1 :
                      searchForm.status === 'rejected' ? 2 :
                      searchForm.status === 'offline' ? 3 : undefined
    }
    
    // 移除空值参数
    Object.keys(params).forEach(key => {
      if (params[key] === undefined || params[key] === '') {
        delete params[key]
      }
    })
    
    // 使用日期范围过滤
    if (searchForm.dateRange && searchForm.dateRange.length === 2) {
      params.startDate = searchForm.dateRange[0]
      params.endDate = searchForm.dateRange[1]
    }
    
    // 调用后端搜索接口获取职位列表
    const response = await request({
      url: '/jobs/search',
      method: 'get',
      params
    })
    
    if (response && response.data) {
      // 使用API返回数据
      jobList.value = response.data.records
      totalJobs.value = response.data.total
      
      // 处理发布时间显示
      jobList.value.forEach(job => {
        job.publishTime = job.createTime ? formatDateTime(job.createTime) : '未知'
      })
    } else {
      // 无数据时清空列表并设置总数为0
      jobList.value = []
      totalJobs.value = 0
    }
  } catch (error) {
    console.error('获取职位列表失败', error)
    ElMessage.error('获取职位列表失败，请稍后重试')
    jobList.value = []
    totalJobs.value = 0
  } finally {
    loading.value = false
  }
}

// 获取状态名称
const getStatusName = (status) => {
  const map = {
    0: '待审核',
    1: '已通过',
    2: '已拒绝',
    3: '已下线'
  }
  return map[status] || status
}

// 获取状态对应的标签类型
const getStatusTag = (status) => {
  const map = {
    0: 'warning',
    1: 'success',
    2: 'danger',
    3: 'info'
  }
  return map[status] || 'info'
}

// 处理选择变化
const handleSelectionChange = (selection) => {
  selectedJobs.value = selection
}

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1
  fetchJobList()
}

// 重置搜索
const resetSearch = () => {
  Object.keys(searchForm).forEach(key => {
    if (key === 'dateRange') {
      searchForm[key] = []
    } else {
      searchForm[key] = ''
    }
  })
  currentPage.value = 1
  fetchJobList()
}

// 刷新职位列表
const refreshJobList = () => {
  fetchJobList()
  ElMessage.success('职位列表已刷新')
}

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchJobList()
}

// 处理每页条数变化
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  fetchJobList()
}

// 格式化日期时间
const formatDateTime = (dateTimeStr) => {
  if (!dateTimeStr) return '未知';
  
  try {
    const date = new Date(dateTimeStr);
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    });
  } catch (e) {
    console.error('日期格式化错误:', e);
    return dateTimeStr; // 返回原始字符串
  }
}

// 导出职位数据
const exportJobData = () => {
  ElMessage.success('职位数据导出功能待实现')
}

// 职位详情相关
const jobDetailVisible = ref(false)
const currentJob = ref(null)

// 查看职位详情
const viewJobDetails = (job) => {
  currentJob.value = { ...job };
  
  // 处理发布时间
  currentJob.value.publishTime = job.createTime ? formatDateTime(job.createTime) : '未知';
  
  jobDetailVisible.value = true;
}

// 拒绝原因对话框相关
const rejectDialogVisible = ref(false)
const rejectForm = reactive({
  reason: '',
  comment: ''
})
const jobToReject = ref(null)
const submitLoading = ref(false)

// 通过职位
const approveJob = async (job) => {
  ElMessageBox.confirm(
    `确定要通过该职位吗？通过后将对求职者可见。`,
    '确认操作',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info',
    }
  )
    .then(async () => {
      try {
        console.log('准备通过职位，ID:', job.id, '状态将更新为:', 1)
        // 调用API通过职位
        const response = await updateJobStatus(job.id, 1)
        console.log('API响应结果:', response)
        
        if (response && response.code === 200) {
          // 更新本地状态
          job.status = 1
          ElMessage.success('职位已通过审核')
          // 关闭详情弹窗
          jobDetailVisible.value = false
          // 刷新职位列表
          fetchJobList()
        } else {
          // API返回了错误
          ElMessage.error(`操作失败: ${response?.message || '未知错误'}`)
        }
      } catch (error) {
        console.error('职位审核通过失败:', error)
        const errorMsg = error.response?.data?.message || error.message || '未知错误'
        ElMessage.error(`操作失败: ${errorMsg}`)
      }
    })
    .catch(() => {})
}

// 拒绝职位
const rejectJob = (job) => {
  jobToReject.value = job
  rejectForm.reason = ''
  rejectForm.comment = ''
  rejectDialogVisible.value = true
}

// 确认拒绝
const confirmReject = async () => {
  if (!rejectForm.reason) {
    ElMessage.warning('请选择拒绝原因')
    return
  }
  
  submitLoading.value = true
  
  try {
    // 获取要拒绝的职位
    const job = jobToReject.value
    if (!job) {
      ElMessage.error('操作失败，职位信息丢失')
      return
    }

    console.log('准备拒绝职位，ID:', job.id, '状态将更新为:', 2)
    // 调用API拒绝职位
    const response = await updateJobStatus(job.id, 2)
    console.log('API响应结果:', response)
    
    if (response && response.code === 200) {
      // 更新本地状态
      job.status = 2
      job.rejectReason = rejectForm.reason + (rejectForm.comment ? `：${rejectForm.comment}` : '')
      ElMessage.success('已拒绝该职位')
      
      rejectDialogVisible.value = false
      // 关闭详情弹窗
      jobDetailVisible.value = false
      // 刷新职位列表
      fetchJobList()
    } else {
      // API返回了错误
      ElMessage.error(`操作失败: ${response?.message || '未知错误'}`)
    }
  } catch (error) {
    console.error('职位拒绝失败:', error)
    const errorMsg = error.response?.data?.message || error.message || '未知错误'
    ElMessage.error(`操作失败: ${errorMsg}`)
  } finally {
    submitLoading.value = false
  }
}

// 下线职位
const offlineJob = (job) => {
  ElMessageBox.confirm(
    `确定要下线该职位吗？下线后将对求职者不可见。`,
    '确认操作',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      try {
        console.log('准备下线职位，ID:', job.id, '状态将更新为:', 3)
        // 调用API下线职位
        const response = await updateJobStatus(job.id, 3)
        console.log('API响应结果:', response)
        
        if (response && response.code === 200) {
          // 更新本地状态
          job.status = 3
          ElMessage.success('职位已下线')
          // 关闭详情弹窗
          jobDetailVisible.value = false
          // 刷新职位列表
          fetchJobList()
        } else {
          // API返回了错误
          ElMessage.error(`操作失败: ${response?.message || '未知错误'}`)
        }
      } catch (error) {
        console.error('职位下线失败:', error)
        const errorMsg = error.response?.data?.message || error.message || '未知错误'
        ElMessage.error(`操作失败: ${errorMsg}`)
      }
    })
    .catch(() => {})
}

// 恢复职位
const restoreJob = (job) => {
  ElMessageBox.confirm(
    `确定要恢复该职位吗？恢复后状态将变为"待审核"。`,
    '确认操作',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info',
    }
  )
    .then(async () => {
      try {
        console.log('准备恢复职位，ID:', job.id, '状态将更新为:', 0)
        // 调用API恢复职位
        const response = await updateJobStatus(job.id, 0)
        console.log('API响应结果:', response)
        
        if (response && response.code === 200) {
          // 更新本地状态
          job.status = 0
          ElMessage.success('职位已恢复至待审核状态')
          // 关闭详情弹窗
          jobDetailVisible.value = false
          // 刷新职位列表
          fetchJobList()
        } else {
          // API返回了错误
          ElMessage.error(`操作失败: ${response?.message || '未知错误'}`)
        }
      } catch (error) {
        console.error('职位恢复失败:', error)
        const errorMsg = error.response?.data?.message || error.message || '未知错误'
        ElMessage.error(`操作失败: ${errorMsg}`)
      }
    })
    .catch(() => {})
}

// 批量通过
const batchApprove = async () => {
  if (selectedJobs.value.length === 0) {
    ElMessage.warning('请先选择职位')
    return
  }
  
  const pendingJobs = selectedJobs.value.filter(job => job.status === 0)
  if (pendingJobs.length === 0) {
    ElMessage.warning('没有可通过的职位')
    return
  }
  
  ElMessageBox.confirm(
    `确定要通过 ${pendingJobs.length} 个职位吗？`,
    '确认操作',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info',
    }
  )
    .then(async () => {
      try {
        let successCount = 0;
        const failedIds = [];
        
        // 依次处理每个职位而不是并行处理，以避免潜在的服务器压力
        for (const job of pendingJobs) {
          try {
            console.log('批量通过职位，ID:', job.id, '状态将更新为:', 1);
            const response = await updateJobStatus(job.id, 1);
            
            if (response && response.code === 200) {
              job.status = 1;
              successCount++;
            } else {
              failedIds.push(job.id);
              console.error(`职位 ${job.id} 通过失败:`, response?.message || '未知错误');
            }
          } catch (err) {
            failedIds.push(job.id);
            console.error(`职位 ${job.id} 通过失败:`, err);
          }
        }
        
        // 显示结果消息
        if (successCount === pendingJobs.length) {
          ElMessage.success(`已通过 ${successCount} 个职位`);
        } else {
          ElMessage.warning(`成功通过 ${successCount} 个职位，${failedIds.length} 个失败`);
          console.error('失败的职位ID:', failedIds);
        }
        
        // 刷新职位列表
        fetchJobList();
      } catch (error) {
        console.error('批量通过职位失败:', error);
        const errorMsg = error.response?.data?.message || error.message || '未知错误';
        ElMessage.error(`操作失败: ${errorMsg}`);
      }
    })
    .catch(() => {})
}

// 批量拒绝
const batchReject = () => {
  if (selectedJobs.value.length === 0) {
    ElMessage.warning('请先选择职位')
    return
  }
  
  const pendingJobs = selectedJobs.value.filter(job => job.status === 0)
  if (pendingJobs.length === 0) {
    ElMessage.warning('没有可拒绝的职位')
    return
  }
  
  ElMessageBox.prompt(
    '请输入拒绝原因',
    '批量拒绝',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPlaceholder: '请输入拒绝原因',
      type: 'warning',
    }
  )
    .then(async ({ value }) => {
      if (!value) {
        ElMessage.warning('请输入拒绝原因')
        return
      }
      
      try {
        let successCount = 0;
        const failedIds = [];
        
        // 依次处理每个职位
        for (const job of pendingJobs) {
          try {
            console.log('批量拒绝职位，ID:', job.id, '状态将更新为:', 2);
            const response = await updateJobStatus(job.id, 2);
            
            if (response && response.code === 200) {
              job.status = 2;
              job.rejectReason = value;
              successCount++;
            } else {
              failedIds.push(job.id);
              console.error(`职位 ${job.id} 拒绝失败:`, response?.message || '未知错误');
            }
          } catch (err) {
            failedIds.push(job.id);
            console.error(`职位 ${job.id} 拒绝失败:`, err);
          }
        }
        
        // 显示结果消息
        if (successCount === pendingJobs.length) {
          ElMessage.success(`已拒绝 ${successCount} 个职位`);
        } else {
          ElMessage.warning(`成功拒绝 ${successCount} 个职位，${failedIds.length} 个失败`);
          console.error('失败的职位ID:', failedIds);
        }
        
        // 刷新职位列表
        fetchJobList();
      } catch (error) {
        console.error('批量拒绝职位失败:', error);
        const errorMsg = error.response?.data?.message || error.message || '未知错误';
        ElMessage.error(`操作失败: ${errorMsg}`);
      }
    })
    .catch(() => {})
}

// 批量下线
const batchOffline = () => {
  if (selectedJobs.value.length === 0) {
    ElMessage.warning('请先选择职位')
    return
  }
  
  const approvedJobs = selectedJobs.value.filter(job => job.status === 1)
  if (approvedJobs.length === 0) {
    ElMessage.warning('没有可下线的职位')
    return
  }
  
  ElMessageBox.confirm(
    `确定要下线 ${approvedJobs.length} 个职位吗？`,
    '确认操作',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      try {
        let successCount = 0;
        const failedIds = [];
        
        // 依次处理每个职位
        for (const job of approvedJobs) {
          try {
            console.log('批量下线职位，ID:', job.id, '状态将更新为:', 3);
            const response = await updateJobStatus(job.id, 3);
            
            if (response && response.code === 200) {
              job.status = 3;
              successCount++;
            } else {
              failedIds.push(job.id);
              console.error(`职位 ${job.id} 下线失败:`, response?.message || '未知错误');
            }
          } catch (err) {
            failedIds.push(job.id);
            console.error(`职位 ${job.id} 下线失败:`, err);
          }
        }
        
        // 显示结果消息
        if (successCount === approvedJobs.length) {
          ElMessage.success(`已下线 ${successCount} 个职位`);
        } else {
          ElMessage.warning(`成功下线 ${successCount} 个职位，${failedIds.length} 个失败`);
          console.error('失败的职位ID:', failedIds);
        }
        
        // 刷新职位列表
        fetchJobList();
      } catch (error) {
        console.error('批量下线职位失败:', error);
        const errorMsg = error.response?.data?.message || error.message || '未知错误';
        ElMessage.error(`操作失败: ${errorMsg}`);
      }
    })
    .catch(() => {})
}

// 获取职位类型名称
const getJobTypeName = (categoryId) => {
  const map = {
    '1': '全职',
    '2': '兼职',
    '3': '实习',
    '4': '校招'
  }
  return map[categoryId] || '未知类型'
}

onMounted(() => {
  fetchJobList()
})
</script>

<style lang="scss" scoped>
.admin-jobs {
  padding: 20px;
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    
    .page-title {
      font-size: 24px;
      font-weight: 600;
      color: #303133;
      margin: 0;
    }
    
    .header-actions {
      display: flex;
      gap: 10px;
    }
  }
  
  .search-card {
    margin-bottom: 16px;
    
    .search-form {
      padding: 10px 0;
    }
  }
  
  .table-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      span {
        font-weight: 600;
      }
      
      .header-right {
        display: flex;
        gap: 10px;
      }
    }
    
    .table-view {
      .job-cell {
        .job-name {
          font-weight: 600;
          margin-bottom: 5px;
        }
        
        .job-company {
          font-size: 13px;
          color: #606266;
          margin-bottom: 5px;
        }
        
        .job-tags {
          display: flex;
          gap: 5px;
        }
      }
      
      .batch-actions {
        margin-top: 16px;
        padding: 10px;
        background-color: #f5f7fa;
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      
      .pagination-container {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}

// 职位详情对话框样式
.job-detail {
  .job-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .job-title {
      font-size: 22px;
      font-weight: 600;
      color: #303133;
      margin: 0;
    }
  }
  
  .job-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
    
    .info-item {
      display: flex;
      align-items: center;
      
      .label {
        font-weight: 600;
        color: #606266;
        min-width: 80px;
      }
      
      .value {
        &.highlight {
          color: #f56c6c;
          font-weight: 600;
        }
      }
    }
  }
  
  .detail-section {
    margin-top: 24px;
    
    .section-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 16px;
      position: relative;
      padding-left: 12px;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background-color: #409EFF;
        border-radius: 2px;
      }
    }
    
    .section-content {
      line-height: 1.6;
      color: #606266;
      
      ::v-deep(ul) {
        padding-left: 20px;
        
        li {
          margin-bottom: 8px;
        }
      }
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

// 响应式适配
@media (max-width: 768px) {
  .admin-jobs {
    .search-card {
      .el-form {
        display: flex;
        flex-direction: column;
        
        .el-form-item {
          margin-right: 0;
        }
      }
    }
    
    .job-info {
      grid-template-columns: 1fr;
    }
  }
}
</style> 